<h1>创建资源管理 admin/asset-create</h1>

<form action="/admin/api-asset-create" method="POST" id="formObj">
  <div class="mb-3">
      <label for="name" class="form-label">资源名称</label>
      <input type="text" class="form-control" id="name" name="name" placeholder="请输入资源名称"/>
  </div>
  <div class="mb-3">
    <label for="type" class="form-label">资源类型</label>
    <div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" value="module" name="type" id="type1">
        <label class="form-check-label" for="type1">
          模块
        </label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" value="menu" name="type" id="menu1">
        <label class="form-check-label" for="menu1">
          菜单
        </label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" value="feature" name="type" id="feature1">
        <label class="form-check-label" for="feature1">
          功能
        </label>
      </div>
    </div>
  </div>
  <div class="mb-3">
    <label for="url" class="form-label">资源地址</label>
    <input type="text" class="form-control" id="url" name="url" placeholder="请输入资源地址"/>
  </div>
  <div class="mb-3">
    <label for="description" class="form-label">资源描述</label>
    <textarea type="text" class="form-control" id="description" name="description" placeholder="请输入资源地址"></textarea>
  </div>
  <div class='mb-3'>
    <label for='_parentId' class='form-label'>父级</label>
    <div data-bs-toggle='modal' class="custom-parent-el" data-bs-target='#myModal'>
      <span  class="custom-parent-el-text"></span>
      <input
        id="_parentId"
        style='pointer-events: none;'
        type='text'
        class='form-control'
        placeholder='点击选择父级'
        disabled
      />
    </div>
  </div>
  <div class="mb-3">
    <label for="status" class="form-label">启用状态</label>
    <div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" value="1" name="status" id="status1">
        <label class="form-check-label" for="status1">
          有效
        </label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" value="0" name="status" id="status0" checked>
        <label class="form-check-label" for="status0">
          无效
        </label>
      </div>
    </div>
  </div>
  <div class="mb-3">
    <label for="sort" class="form-label">排序编号</label>
    <input type="number" class="form-control" id="sort" name="sort" placeholder="列表排序值"/>
  </div>
  <div style="display: flex;justify-content: center">
    <button type="submit" class="btn btn-primary">新增</button>
  </div>
  <div class='modal' id='myModal' tabindex='-1'>
    <div class='modal-dialog modal-lg'>
      <div class='modal-content'>
        <div class='modal-header'>
          <h5 class='modal-title'>选择父级</h5>
          <button
            type='button'
            class='btn-close'
            data-bs-dismiss='modal'
            aria-label='Close'
          ></button>
        </div>
        <div class='modal-body'>
          <ul class="list-group">
            {{#each assetTree}}
              {{> tree-node this depth=0}}
            {{/each}}
          </ul>
        </div>
        <div class='modal-footer'>
          <button
            type='button'
            class='btn btn-secondary'
            data-bs-dismiss='modal'
          >关闭</button>
          <button type='button' class='btn btn-primary' id="modalSubmit" data-bs-dismiss='modal'>确定</button>
        </div>
      </div>
    </div>
  </div>
</form>

<script>
  const modalSubmit = document.getElementById('modalSubmit');
  modalSubmit.onclick = function () {
    const formObj = document.getElementById('formObj');
    let parentModalInfo = document.querySelector(`.tree-select-item[data-id='${formObj.parentId.value}']`);
    let parentTextEl = document.querySelector('.custom-parent-el-text');
    const {type,url,name,id} = parentModalInfo.dataset;
    parentTextEl.innerHTML = `
    <span class="badge bg-primary">${id}</span>
    <span class="badge bg-info">${type}</span>
    <span class="badge bg-secondary">${name}</span>
    <span class="badge bg-success">${url}</span>
    `
    document.querySelector('#_parentId').value = id;
  }
</script>

<style>
  .custom-parent-el{
    position: relative;
  }
  .custom-parent-el-text{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
  }
  .custom-parent-el-text .badge{
    margin-right: 0.5rem;
  }
  #parentId{
    color: transparent !important;
  }
</style>